<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useSafeAreaHooks } from '@/hooks/useSafeArea'

const { top, bottom } = useSafeAreaHooks()

// 安全区域样式
const safeAreaStyle = computed(() => ({
  paddingTop: `${top}px`,
  paddingBottom: `${bottom}px`,
}))
</script>

<template>
  <view
    class="profile-container"
    :style="safeAreaStyle"
  >
    <text class="text-size-2xl text-#fff">
      用户页面
    </text>
  </view>
</template>

<style lang="scss" scoped>
.profile-container {
  min-height: 100%;
  background-color: #0A0A0A;
  color: #FFFFFF;
  box-sizing: border-box;
}
</style>
